<template>
	<div id="index">
			<div class="index_left">
				  <el-menu :router="true"
				      default-active="2"
					  active-text-color="#ffffff"
					  background-color="#5ba585"
					  text-color="#fff"
				     >
					  <el-menu-item index="/">
					  <i class="el-icon-menu"></i>
					  <span slot="title">首页</span>
					  </el-menu-item>
					  
				      <el-submenu index="1">
						  
				        <template slot="title">
				          <i class="el-icon-shopping-bag-1"></i>
				          <span>在聊材料</span>
				        </template>
				         <el-menu-item index="/product">
				         <i class="el-icon-collection-tag"></i>
				         <span>商品配置</span>
				         </el-menu-item>
						 <el-menu-item>
						 <i class="el-icon-collection-tag"></i>
						 <span>商品配置</span>
						 </el-menu-item>
				      </el-submenu>
				    </el-menu>
			</div>
			<div class="index_right">
				<div class="header">
					
					<div class="left">积分商城管理后台</div>
					<div class="right">admin02</div>
				</div>
				<div class="content">
					<router-view></router-view>
				</div>
			</div>
	</div>
</template>
<style lang="less" scoped>
	/deep/ .el-menu{
		background-color: unset;//去掉背景颜色
		
	}
	/deep/ .el-icon-menu span{
		color: #ffffff;
	}
	/deep/ .el-menu i{
		color: #ffffff;
	}
	#index{
		width: 100%;
		height: 100%;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-between;
		
		.index_left{
			width: 240px;
			height: calc ( 100% - 100px );
			background-color: #5ba584;
			padding-top: 100px;
			
		}
		.index_right{
			width: calc(100% - 20px);
			height: 100%;
			.header{
				display: flex;
				justify-content: space-between;
				margin: 0px 10px;
				height: 60px;
				line-height: 60px;//垂直居中  align-items: center; d都可以
				background-color: #ffffff;
				.left{
					color: #5ba584;
					font-size: 24px;
					padding: 10px;
					
				}
				.right{
					font-size: 16px;
				}
			}
			.content{
				width: calc(100% - 40px);
				height: calc(100% - 100px);
				margin: 10px;
				background-color: #ffffff;
				padding: 10px;
			}
		}
		
		
	}
</style>